import 'package:beautiful_demo/common/dsliver.dart';
import 'package:beautiful_demo/common/res.dart';
import 'package:beautiful_demo/mvc/chat/room/messages_bean.dart';
import 'package:drive/drive.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mvc/flutter_mvc.dart';

import 'controller.dart';

///description:聊天室

class InfoWidget extends MvcStatelessWidget<ChatRoomController> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 60.dp,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onVerticalDragDown: c.onHeaderVerticalDownListener,
            onVerticalDragEnd: c.onHeaderVerticalEndListener,
            onVerticalDragUpdate: c.onHeaderVerticalUpdateListener,
            child: Container(
              color:const Color(0x01ffffff),
              child: Column(

                children: [
                  SizedBox(
                    height: 5.dp,
                  ),
                  Container(
                    height: 4.dp,
                    width: 150.dp,
                    decoration: BoxDecoration(
                        color: const Color(0xfff0f1f3),
                        borderRadius: BorderRadius.circular(4.dp)),
                  ),
                  Expanded(
                      child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      ClipRRect(
                        borderRadius: BorderRadius.circular(25.dp),
                        child: CachedImage(
                          c.logo,
                          width: 25.dp,
                          height: 25.dp,
                        ),
                      ),
                      SizedBox(
                        width: 5.dp,
                      ),
                      Text(
                        c.nick,
                        style: resTextStyle30.copyWith(),
                      )
                    ],
                  ))
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

@immutable
class MoreWidget extends MvcStatelessWidget<ChatRoomController> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: c.onMoreClick,
      child: SizedBox(
        height: 40.dp,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              width: 60.dp,
              height: 1.dp,
              color: const Color(0xffdedede),
            ),
            SizedBox(width: 8.dp,),
            Text(
              "点击更多消息",
              style: resTextStyle.copyWith(
                  fontSize: 14.sp, color: const Color(0xc37d0eac)),
            ),
            SizedBox(width: 8.dp,),
            Container(
              width: 60.dp,
              height: 1.dp,
              color: const Color(0xffdedede),
            ),
          ],
        ),
      ),
    );
  }
}

class TimeWidget extends StatelessWidget {
  final String time;

  const TimeWidget(this.time, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20.dp, bottom: 5.dp),
      alignment: Alignment.topCenter,
      child: Text(
        time,
        style: resTextStyle30,
      ),
    );
  }
}

class MeItem extends MvcStatelessWidget<ChatRoomController> {
  final MessagesDataListBean item;

  MeItem(this.item);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20.dp, left: 67.dp.dp, right: 25.dp),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  "Me",
                  style: resTextStyle30.copyWith(fontSize: 12.sp),
                ),
                SizedBox(
                  height: 3.dp,
                ),
                LayoutBuilder(builder: (context, con) {
                  return Container(
                    constraints:
                        BoxConstraints(maxWidth: con.maxWidth, minWidth: 0),
                    decoration: BoxDecoration(
                        // color: const Color(0xff009aff),
                        color: const Color(0xff8800ff),
                        borderRadius: resBorderRadius(
                            topLeft: 8.dp,
                            bottomLeft: 8.dp,
                            topRight: 1,
                            bottomRight: 8.dp)),
                    padding: EdgeInsets.only(
                        left: 12.dp, right: 20.dp, top: 12.dp, bottom: 8.dp),
                    child: Text(
                      item.value,
                      style:
                          resTextStyle.copyWith(color: const Color(0xffeaeaea)),
                    ),
                  );
                }),
              ],
            ),
          ),
          SizedBox(
            width: 15.dp,
          ),
          ClipRRect(
              borderRadius: BorderRadius.circular(30.dp),
              child: Image.asset(
                "images/home_chat_select.png",
                width: 42.dp,
                height: 42.dp,
                fit: BoxFit.cover,
              )),
        ],
      ),
    );
  }
}

class YouItem extends MvcStatelessWidget<ChatRoomController> {
  final MessagesDataListBean item;

  YouItem(this.item);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20.dp, right: 67.dp, left: 25.dp),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          ClipRRect(
              borderRadius: BorderRadius.circular(30.dp),
              child: CachedImage(
                c.logo,
                width: 42.dp,
                height: 42.dp,
                fit: BoxFit.cover,
              )),
          SizedBox(
            width: 15.dp,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  c.nick,
                  style: resTextStyle30.copyWith(fontSize: 12.sp),
                ),
                SizedBox(
                  height: 3.dp,
                ),
                LayoutBuilder(builder: (context, con) {
                  return Container(
                    constraints:
                        BoxConstraints(maxWidth: con.maxWidth, minWidth: 0),
                    decoration: BoxDecoration(
                        color: const Color(0xffffffff),
                        borderRadius: resBorderRadius(
                            topRight: 8.dp,
                            bottomLeft: 8.dp,
                            topLeft: 1,
                            bottomRight: 8.dp)),
                    padding: EdgeInsets.only(
                        right: 12.dp, left: 20.dp, top: 12.dp, bottom: 8.dp),
                    child: Text(
                      item.value,
                      style:
                          resTextStyle.copyWith(color: const Color(0xff2a2828)),
                    ),
                  );
                }),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class EmojiWidget extends MvcStatelessWidget<ChatRoomController> {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 234.dp,
        color: Colors.white,
        padding: EdgeInsets.only(left: 16.dp, right: 16.dp),
        child: CustomScrollView(
          physics: const BouncingScrollPhysics(),
          slivers: [
            SliverToBoxAdapter(
              child: _buildTitleItem(),
            ),
            DSliverGrid(
              (ctx, index) {
                return Material(
                  color: Colors.transparent,
                  child: InkWell(
                    onTap: () {
                      c.onEmojiItemClick(c.listEmoji[index]);
                    },
                    child: Center(
                      child: Text(
                        c.listEmoji[index],
                        style: resTextStyle.copyWith(fontSize: 25.sp),
                      ),
                    ),
                  ),
                );
              },
              childCount: c.listEmoji.length,
              crossAxisCount: 8,
              mainAxisSpacing: 5.dp,
              crossAxisSpacing: 10.dp,
            )
          ],
        ));
  }

  Widget _buildTitleItem() {
    return Container(
      margin: EdgeInsets.only(top: 7.dp, bottom: 2.dp),
      child: Text(
        "所有表情",
        style: resTextStyle.copyWith(color: Color(0xff707174), fontSize: 12.sp),
      ),
    );
  }
}

//发送消息输入框
@immutable
class SendMessageWidget extends MvcStatelessWidget<ChatRoomController> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 55.dp,
      decoration: BoxDecoration(
          color: const Color(0xf7ffffff),
          borderRadius: resBorderRadius(topLeft: 25.dp, topRight: 25.dp),
          boxShadow: const [
            BoxShadow(
                color: Color(0x11000000), blurRadius: 3, offset: Offset(0, -3))
          ]),
      child: Row(
        children: [
          SizedBox(
            width: 11.dp,
          ),
          GestureDetector(
            onTap: c.onEmojiClick,
            child: Image.asset(
              "images/silent1.png",
              width: 40.dp,
              height: 40.dp,
            ),
          ),
          Expanded(
              child: CupertinoTextField(
            decoration: const BoxDecoration(color: Colors.transparent),
            controller: c.textMessageController,
            maxLength: 220,
            placeholderStyle:
                resTextStyle9C.copyWith(height: 1.4, fontSize: 16.sp),
            style: resTextStyle30.copyWith(height: 1.4, fontSize: 16.sp),
            placeholder: "请输入消息内容",
            padding: EdgeInsets.symmetric(horizontal: 12.dp, vertical: 8.dp),
          )),
          GestureDetector(
            onTap: c.onSendClick,
            child: Container(
              width: 76.dp,
              height: 50.dp,
              alignment: Alignment.center,
              padding: EdgeInsets.only(left: 7.dp),
              margin: EdgeInsets.only(right: 3.dp),
              decoration: BoxDecoration(
                  gradient: const LinearGradient(colors: [
                    Color(0xffee453f),
                    resMainColor,
                  ]),
                  borderRadius: BorderRadius.circular(50.dp)),
              child: Image.asset(
                "images/send.png",
                width: 32.dp,
                height: 32.dp,
              ),
            ),
          )
        ],
      ),
    );
  }
}
